<template>
	<div class="countDiv">
		<h1 ref="myh1" >this is a global vue :MyCount</h1>
		
		<button @click="showThis">showThis</button>
		<button @click="showMyh1">showMyh1</button>
		<br />
		<input type="text" ref="myInput01" v-if="myInput01Status" />
		<button @click="showMyInput01" v-else >显示输入框</button>
		<br />
		<button @click="focusMyInput01">聚焦至上方输入框</button>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				myInput01Status:false,
				count_01:0
			}
		},
		methods:{
			showThis(){
				console.log(this);
			},
			showMyh1(){
				console.log(this.$refs.myh1);
				this.$refs.myh1.style.color='red'
			},
			focusMyInput01(){
				console.log(this.count_01);
				this.$nextTick(()=>{
					this.$refs.myInput01.focus();
				})
				this.count_01++;
				
			},
			showMyInput01(){
				this.myInput01Status=true;
				//组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。
				//通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
				this.$nextTick(()=>{
					this.$refs.myInput01.focus();
				})
			}
		},
	}
</script>

<style>
	.countDiv{
		background-color: blue;
	}
</style>